<template>
  <div class="search-container">
    <h1 class="search-title">请输入水产品名称或图片</h1>

    <!-- 搜索区域 -->
    <div class="search-box">
      <div class="search-input-group">
        <input 
          type="text" 
          placeholder="输入关键字"
          class="search-input"
          v-model="searchQuery"
          @keyup.enter="handleSearch"
        />

        <!-- 图片上传按钮 -->
        <input 
          type="file" 
          ref="fileInput" 
          accept="image/*" 
          @change="handleImageUpload" 
          style="display: none;"
        />
        <button class="icon-btn image-upload-btn" @click="triggerUpload">
          <svg viewBox="0 0 24 24">
            <path d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
          </svg>
        </button>

        <button class="search-btn" @click="handleSearch">
          <svg viewBox="0 0 24 24">
            <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
          </svg>
          搜索
        </button>
      </div>

      <!-- 图片预览缩略图 -->
      <div class="image-preview" v-if="previewUrl" @click="triggerUpload">
        <img :src="previewUrl" alt="预览图" />
      </div>

      <!-- 快捷搜索 -->
      <div class="quick-search">
        <span class="quick-search-label">快捷搜索：</span>
        <button 
          v-for="(item, index) in quickSearchItems" 
          :key="index"
          @click="quickSearch(item)"
          class="quick-search-item"
        >
          {{ item }}
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

export default {
  setup() {
    const searchQuery = ref('');
    const fileInput = ref(null);
    const previewUrl = ref('');
    const quickSearchItems = ['三文鱼', '金枪鱼', '帝王蟹', '波士顿龙虾', '生蚝'];
    const selectedFile = ref(null);
    const router = useRouter();

    const triggerUpload = () => {
      fileInput.value?.click();
    };

    const handleImageUpload = (event) => {
      const file = event.target.files[0];
      if (file && file.type.startsWith('image/')) {
        selectedFile.value = file;
        const reader = new FileReader();
        reader.onload = () => {
          previewUrl.value = reader.result;
        };
        reader.readAsDataURL(file);
      }
    };

    const handleSearch = () => {
      // 跳转到/shiyu页面
      router.push('/shiyu');
    };

    const quickSearch = (item) => {
      searchQuery.value = item;
      handleSearch();
    };

    return {
      searchQuery,
      quickSearchItems,
      handleSearch,
      quickSearch,
      fileInput,
      triggerUpload,
      handleImageUpload,
      previewUrl
    };
  }
};
</script>

<style scoped>
.search-container {
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 保持容器大小不变 */
  height: 200px;
  box-sizing: border-box;
  width: 40%;
}

.search-title {
  color: white;
  font-size: 1.1rem;
  margin-bottom: 8px;
  text-align: center;
}

.search-box {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3); 
  /* 改为半透明黑色 */
  border-radius: 12px; /* 增加圆角 */
  padding: 10px 16px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); /* 增强阴影提升层次感 */
  box-sizing: border-box;
  position: relative;
}

.search-input-group {
  display: flex;
  align-items: center;
}

.search-input {
  flex: 1;
  padding: 8px 12px;
  font-size: 0.95rem;
  border: none;
  outline: none;
  color: #ffffff; /* 白色字体提升可读性 */
  background-color: rgba(255, 255, 255, 0.1); /* 输入框背景也做轻微透明处理 */
  border-radius: 6px; /* 圆角与容器风格统一 */
}

.search-input::placeholder {
  color: #a0aec0;
}

.icon-btn {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
}

.icon-btn svg {
  width: 20px;
  height: 20px;
  stroke: #718096;
  fill: none;
  stroke-width: 2;
}

.icon-btn:hover svg {
  stroke: #3182ce;
}

.search-btn {
  background-color: #3182ce;
  color: white;
  padding: 6px 12px;
  font-size: 0.85rem;
  border-radius: 4px;
  margin-left: 8px;
  display: flex;
  align-items: center;
  transition: background-color 0.2s;
}

.search-btn:hover {
  background-color: #2c5282;
}

.search-btn svg {
  width: 18px;
  height: 18px;
  margin-right: 4px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.image-preview {
  position: absolute;
  top: -40px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #3182ce;
  cursor: pointer;
}

.image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quick-search {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 0.85rem;
}

.quick-search-label {
  color: #4fd1c5;
  opacity: 0.7;
  margin-right: 8px;
}

.quick-search-item {
  margin: 2px 6px;
  padding: 2px 10px;
  border-radius: 9999px;
  background-color: #2a4365;
  color: white;
  cursor: pointer;
  transition: background-color 0.2s;
}

.quick-search-item:hover {
  background-color: #2c5282;
}
</style>